<template>
	<div>
		<div class="title">校园卡充值</div>
		<div class="content">
			<el-card style="max-width: 70%" class="card">
				<template #header>
					<div class="card-header">
						<span>校园卡</span>
					</div>
				</template>
				<div class="card_item">
					<div class="demo-image">
						<div class="block">
							<el-image style="width: 150px; height: 150px; border-radius: 20px" :src="globalStore?.userInfo?.img"  />
						</div>
					</div>
					<div class="right">
						<div class="info">
							<p>学号：{{ cardInfo?.studentcard }}</p>
							<span>余额：{{ schooolCost }}元</span>
							<div class="mb-4" style="margin-top: 10px">
								<el-popconfirm title="确认充值10元?" @confirm="YesMoney(10)">
									<template #reference>
										<el-button round>10</el-button>
									</template>
								</el-popconfirm>
								<el-popconfirm title="确认充值30元?" @confirm="YesMoney(30)">
									<template #reference>
										<el-button type="primary" round> 30</el-button>
									</template>
								</el-popconfirm>
								<el-popconfirm title="确认充值50元?" @confirm="YesMoney(50)">
									<template #reference>
										<el-button type="success" round>50</el-button>
									</template>
								</el-popconfirm>
								<el-button type="warning" round @click="dialogVisible = true">自定义金额</el-button>
							</div>
						</div>
					</div>
				</div>
				<!-- <template #footer>11123123</template> -->
			</el-card>
		</div>
		<el-dialog v-model="dialogVisible" title="校园卡充值" width="400px" center>
		<div style="display: flex; justify-content: center">
			<el-form :model="form" style="max-width: 400px">
				<el-form-item label="金额">
					<el-input v-model="form.money" style="width: 200px" />
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="InsertMoney"> 充值 </el-button>
			</div>
		</template>
	</el-dialog>
	</div>
	
</template>

<script setup>
import { ref, onMounted, reactive, inject } from "vue";
import { GlobalStore } from "@/stores";
const globalStore = GlobalStore();
const dialogVisible = ref(false);
import {
	shcoolCost,
	getCardId,
	UpdateSchool,
	getBuildId,
	getRoom,
	StudenPayFees,
	StudenUpdateRoom,
	UpdatePayFees,
	DianInfo
} from "@/api/student/home";
const cardInfo = ref({});
const schooolCost = ref();
const form = reactive({
	money: ""
});
const getStudenCardId = async () => {
	try {
		const res = await getCardId(globalStore.userInfo.id);
		if (res.data.code === 200) {
			cardInfo.value = { ...res.data.data[0] };
			// form.name = cardInfo.value.studentcard;
			// form.region = cardInfo.value.build;
			// console.log(cardInfo.value)
		} else {
			ElNotification({
				message: "获取信息失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 获取校园卡e
const shcoolCostFun = async () => {
	try {
		const res = await shcoolCost({ id: globalStore.userInfo.id });
		if (res.data.code === 200) {
			schooolCost.value = res.data.data[0].school_pay;
			// console.log(res)
		} else {
			ElNotification({
				message: "获取信息失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 自定义充卡
const InsertMoney = async () => {
	if (!form.money) {
		ElNotification({
			message: "没有输入金额 ",
			type: "error",
			duration: 1000
		});
        return
	}
    let id = globalStore.userInfo.id ;
	let num = Number(form.money) + Number(schooolCost.value);
	try {
		const res = await UpdateSchool({ id,num});
		if (res.data.code === 200) {
			schooolCost.value = res.data.data[0];
			shcoolCostFun()
			ElNotification({
				message: "充值成功 ",
				type: "success",
				duration: 3000
			});
			dialogVisible.value = false
		} else {
			ElNotification({
				message: "充值失败",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 固定充卡
const YesMoney  = async (num)=>{
	let id = globalStore.userInfo.id ;
	let num2 = Number(num) + Number(schooolCost.value);
	try {
		const res = await UpdateSchool({ id,num:num2});
		if (res.data.code === 200) {
			schooolCost.value = res.data.data[0];
			shcoolCostFun()
			ElNotification({
				message: "充值成功 ",
				type: "success",
				duration: 3000
			});
			dialogVisible.value = false
		} else {
			ElNotification({
				message: "充值失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
}
onMounted(() => {
	getStudenCardId();
	shcoolCostFun();
});
</script>

<style scoped lang="scss">
.title {
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
}
.content {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	.card {
		width: 50%;
		.card_item {
			width: 80%;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		.card-header {
			height: 30px;
		}
		.demo-image {
			width: 49%;
		}
		.right {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.info {
				margin-left: 20px;
			}
		}
	}
}
.demo-image .block {
	padding: 30px 0;
	text-align: center;
	border-right: solid 1px var(--el-border-color);
	display: inline-block;
	width: 20%;
	box-sizing: border-box;
	vertical-align: top;
}
.demo-image .block:last-child {
	border-right: none;
}
.demo-image .demonstration {
	display: block;
	color: var(--el-text-color-secondary);
	font-size: 14px;
	margin-bottom: 20px;
}
</style>
